// 交互-链接
import React, { useState, useEffect, useCallback } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { Cascader, notification, Radio } from 'antd';
// import { filterObjectNullKeys } from 'src/libs/utils';
import { getInternalCategoryTree, getCategoryTree } from 'src/services/AnalyseManage';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	deloitteFlag?: any;
}

const JumpSettings = ( props: IProps ) => {
	const { config, onValuesChange, form, deloitteFlag } = props;

	const [ options, setOptions ] = useState( [] );

	const loadOptions = useCallback( async () => {
		// 德勤方案
		if ( deloitteFlag === '1' ) {
			const res = await getInternalCategoryTree();
			// console.log( res );
			if ( res.status && res.status === 1 ) {
				res.data.forEach( v => {
					v.id = v.resourceId;
				} );
				setOptions( res.data );
			}
		} else {
			const res = await getCategoryTree( { type: 'CUSTOMER' } );
			// console.log( res );
			if ( res.data.success ) {
				setOptions( res.data.data );
			}
		}
	}, [ deloitteFlag ] );

	useEffect( () => {
		loadOptions();
	}, [ loadOptions ] );

	const handleChange = ( value ) => {

		if ( config.mutual.linkHref ) {
			notifyErrorMsg( '文本框的跳转设置和超链接设置不能同时开启，已清除超链接设置' );
		}
		form.setFieldsValue( { jumpReport: value } );
		onValuesChange( config.type, config.key, { jumpReport: value, linkHref: '' }, 'mutual' );
	};

	const notifyErrorMsg = ( msg ) => {
		notification.error( {
			message: '',
			description: msg,
		} );
	};
	const fieldNames = { label: 'name', value: 'id', children: 'children' };
	return (
		<div key="link">
			<FormItem label="选择需要跳转的报表" name="jumpReport">
				<Cascader placeholder='请选择' allowClear options={ options } onChange={ handleChange } fieldNames={ fieldNames }>
				</Cascader>
			</FormItem>
			<FormItem label="超链接打开方式" name="jumpOpeningMode">
				<Radio.Group defaultValue="_blank">
					<Radio value='modal'>超链接在本页面弹框中打开</Radio>
					<Radio value='_self'>在本页面打开</Radio>
					<Radio value='_blank'>打开浏览器新页面</Radio>
				</Radio.Group>
			</FormItem>
		</div>
	);
};

export default React.memo( JumpSettings );
